<template>
  <div>
<h2>显示页面</h2>
<input type="button" value="导出" @click="daochu">
房型名称
<input type="text" v-model="state.name" >
<input type="button" @click="show" value="查询">
<table border="1">
  <tr>
    <td>房型名称</td>
    <td>房型面积</td>
    <td>门店</td>
    <td>房型照片</td>
    <td>操作</td>
   
  </tr>
  <tr v-for="item in list">
    <td>{{  item.name}}</td>
    <td>{{ item.size }}</td>
    <td>{{ item.menDian }}</td>
    <td>{{ item.state==1?"启用":"禁用" }}</td>
    <td>
      <img :src="'https://localhost:7276'+item.photo"  width="50" height="50">
    </td>
  
    <td>
      <input type="button" @click="upd(item.id)" value="修改">
      <input type="button" @click="dele(item.id)" value="删除">
      <input type="button" @click="zhuangtai(item.id,item.state)" value="状态">
    </td>
  </tr>
</table>
  </div>
  共<span>{{ count }}</span>条,每页<span>{{ state.pageSize }}</span>条,当前<span>{{ state.pageIndex }}</span>/<span>{{ pcount }}</span>
  <input type="button" @click="fenye('a')" value="首页">
  <input type="button" @click="fenye('b')" value="上一页">
  <input type="button" @click="fenye('c')" value="下一页">
  <input type="button" @click="fenye('d')" value="尾页">
</template>

<script setup lang="ts">
import { reactive,toRefs,onMounted } from 'vue';
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router';
let route=useRoute();
let router=useRouter();
let data:any=reactive({
  state:{
  pageIndex:1,
  pageSize:2,
  name:''
  },
  count:0,
  pcount:0,
  list:[]
})
let {state,list,count,pcount}=toRefs(data)
onMounted(()=>{
  show()
})
function show()
{
  let obj={
   pageIndex:state.value.pageIndex,
   pageSize:state.value.pageSize,
   name:state.value.name
  }
  axios({
    url:'/api/Room/GetAll',
    method:'get',
    params:obj
  })
  .then(res=>{
    list.value=res.data.data;
    count=res.data.cc;
    pcount=res.data.pp
    console.log(list.value)
  })
}
const fenye=(obj:any)=>{
  switch(obj)
  {
    // case"a":
    // state.value.pageIndex=1;
    // break;
    // case"b":
    // state.value.pageIndex--;
    // break;
    // case"c":
    // state.value.pageIndex++;
    // break;
    // case"d":
    // state.value.pageIndex=pcount;
    //  break;

    case"a":
    state.value.pageIndex=1;
    break;
    case"b":
    state.value.pageIndex--;
    break;
    case"c":
    state.value.pageIndex++;
    break;
    case"d":
    state.value.pageIndex=pcount;
    break;
    
  }
  show()
}
const dele=(id:any)=>
{
if(confirm("确定要删除吗?"))
{
  let obj={
    id:id
  }
  axios({
    url:'/api/Room/dele',
    method:'get',
    params:obj
  })
  .then(res=>{
    if(res.data.data==1)
  {
    alert("删除成功")
    show()
  }
  else
  {
    alert("删除失败")
  }
  })
  .catch(err=>{
    
  })
}
}
function upd(id:any){
  router.push({
    path:'update',
    query:{id:id}
  })
}
const zhuangtai=(id:any,state:any)=>{
  if(state==1)
    {
      state=0;
    }
    else
    {
      state=1;
    }
    let obj={
      id:id,
      states:state
    }
    axios({
      url:'/api/Room/Zhuangtai',
      method:'get',
      params:obj
    })
    .then(res=>{
      if(res.data.data==1)
    {
      alert("修改状态成功")
      show()
    }
    })
    .catch(err=>{

    })
}
function daochu()
{
  location.href='https://localhost:7276/api/Room/ExporExcel'
}
</script>

<style scoped>

</style>